<template>
    <div>
        <div class="content-header">
            <div class="container">

            </div>
        </div>

        <div class="content">
            <div class="container">

                <div class="row">

                    <div class="col-lg-8">
                        <form>
                            <div class="form-group">
                                <label for="paramsTextarea">原字符串</label>
                                <textarea class="form-control" id="paramsTextarea" rows="8" v-model="paramsText"
                                    @blur="handleInputBlur"></textarea>
                            </div>

                             <el-button type="success" @click="encodeProcess" style=" width: 120px;">UrlEncoee编码</el-button>

                             <el-button type="danger" @click="decodeProcess" style=" margin-left:30px; width: 120px;">UrlEncoee解码</el-button>


                            <div class="form-group mt-3" >
                                <label for="curlResTextarea">处理结果</label>
                                <textarea class="form-control" id="curlResTextarea" rows="10" placeholder="{}"
                                    v-model="curlVal"></textarea>
                            </div>
                        </form>
                    </div>

                </div>
            </div>

        </div>
    </div>
</template>

<script>

export default {
    name: "EncodeDecodeIndex",
    data() {
        return {
            // val: '',
            curlVal: '',
            paramsText: '',
            formParam: {
                postParams: ''
            }
        };
    },
    methods: {

        encodeProcess() {
            //console.log('oo')
            if (this.paramsText) {
                this.curlVal = encodeURIComponent(this.paramsText);
            }
        },
        decodeProcess() {
            //console.log('oo')
            if (this.paramsText) {
                this.curlVal = decodeURIComponent(this.paramsText);
                
            }
        }
    }
};
</script>

<style scoped></style>